import { Form, Input, Select, Radio, Button, Upload, } from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useEffect, useState } from 'react'
import { newArticle, getArticleDetail, updateArticle } from '@/apis/article'
import './index.scss'
import { message } from 'antd'
import { useNavigate } from 'react-router-dom'
// 获取自定义Hook函数
import useChannel from '@/hooks/useChannel'
import { useSearchParams } from 'react-router-dom'


const { Option } = Select

const Publish = () => {
    // 获取频道列表
    const { channels } = useChannel()

    const [value, setValue] = useState('')  // 富文本框内容
    const [visible, setVisible] = useState(false)   // 封面组件显示和隐藏
    const [type, setType] = useState(0)  // 选择文章封面类型

    // 控制封面组件显示隐藏(切换上传图片模式)
    const changeScheme = (num) => {
        if (num === 0) {
            // 提交图片框移除
            setVisible(false)
        } else {
            setVisible(true)
        }
        // 什么时候清空图片列表？从一个图片多的模式 => 图片少的模式 (例如，3=>1,3=>无,1=>无)
        if(type > num){
            setImgList([])
        }
        setType(num)
        setIsUpload(checkType(num))
    }

    // 校验规则
    const [isUpload, setIsUpload] = useState(false)

    // 该图片上传校验触发条件
    // 1.切换模式时触发
    // 2.上传图片时应触发
    // 3.提交时应进行触发
    const checkType = (params = -1) => {
        if (params >= 0) {
            return returnCheck(params)
        } else {
            return returnCheck(type)
        }
    }
    const returnCheck = (type) => {
        // 这里的true和false分别表示意思是 => "检验错误" 和 "检验通过"
        // 当上传图片模式为 三图
        if (type === 3 || type === 1) {
            // 上传三图有两种情况：
            // 1.刚切换该模式，没有图片
            if (imgList.length === 0) {
                return true
            } else {
                // 2.上传了图片数量 >0 (三图<=3,一图=1) 
                return false
            }
        }
        // 上传图片为 无图 默认返回false
        if (type === 0) {
            return false
        }
    }

    // 创建校验规则
    const rules = {
        title: [
            { required: true, message: '请填写文章标题' }
        ],
        channel_id: [
            { required: true, message: '请选择文章频道，对其进行归类' }
        ],
        content: [
            { required: true, message: '请填写文章内容' }
        ]
    }



    // 发布文章
    const navigate = useNavigate()
    const submitFormData = async (formData) => {
        // 根据封面选择进行判断
        if (isUpload) return
        // 创建传递数据
        const { channel_id, content, title, type } = formData
        const article = {
            title,
            content,
            cover: {
                type,
                images: imgList.map(item => {
                    // 如果item中有response
                    if (item.response) {
                        return item.response.data.url
                    } else {
                        return item.url
                    }
                })
            },
            channel_id
        }
        // 调用接口，发送请求
        if (article_id) {
            // 调用更新接口
            await updateArticle({ ...article, id: article_id })
        } else {
            await newArticle(article)
        }
        message.success('文章发布成功!')
        // 跳转
        navigate('/article', { replace: true })
    }

    // 上传图片时回调
    // 创建图片存储数组
    const [imgList, setImgList] = useState([])
    const uploadFile = (info) => {
        setImgList(info.fileList)
        // 修改图片上传状态
        setIsUpload(checkType())
    }

    // 上传图片前回调
    const beforeUpload = () => {
        // 当图片数组长度 === 上传图模式(图片个数)时
        if (imgList.length === type) {
            // 新添加图片不进行上传处理
            console.log(1)
            return false
        }
        // 否则，放行通过
        return true
    }

    const [searchParams] = useSearchParams()
    const article_id = searchParams.get('id')
    const [form] = Form.useForm()
    // 回填数据（编辑功能）
    useEffect(() => {
        if (article_id) {
            // 通过id调用获取文章详情接口
            getArticleDetail(article_id).then(res => {
                const { type, images } = res.data.cover
                // 回显到表单
                form.setFieldsValue({
                    ...res.data,
                    type: type
                })
                // 回显封面
                function ShowImages() {
                    if (type !== 0) {
                        setVisible(true)
                    }
                    setImgList(images.map(url => ({ url })))
                }
                ShowImages()
            })
        }
    }, [article_id, form])

    return <div className="publish">
        <Form onFinish={submitFormData} form={form}>
            <Form.Item name='title' label="标题" rules={rules.title}>
                <Input placeholder="请输入文章标题" />
            </Form.Item>
            <Form.Item label="频道" name="channel_id" rules={rules.channel_id}>
                <Select placeholder="请输入文章频道" >
                    {channels.map(item =>
                        <Option key={item.id} value={item.id}>{item.name}</Option>
                    )}
                </Select>
            </Form.Item>
            <Form.Item label="封面">
                <Form.Item name="type" initialValue={0}>
                    <Radio.Group onChange={(e) => changeScheme(e.target.value)}>
                        <Radio value={1}>单图</Radio>
                        <Radio value={3}>三图</Radio>
                        <Radio value={0}>无图</Radio>
                    </Radio.Group>
                </Form.Item>
                {isUpload ? <div className="imgCheck ant-form-item-explain-error">当前模式下，图片是必须上传的</div> : ''}
                {
                    visible &&
                    <Upload
                        maxCount={type}
                        name='image'
                        showUploadList
                        action={'http://geek.itheima.net/v1_0/upload'}
                        onChange={uploadFile}
                        beforeUpload={beforeUpload}
                        multiple={type > 1}
                        fileList={imgList}
                        listType="picture-card" >
                        <div style={{ marginTop: 8 }}>
                            <PlusOutlined />
                        </div>
                    </Upload>
                }

            </Form.Item>
            <Form.Item label="内容" name="content" rules={rules.content}>
                <ReactQuill className='publish-quill' theme="snow" value={value} onChange={setValue}></ReactQuill>
            </Form.Item>
            <Form.Item>
                <Button type="primary" htmlType='submit' size='large'>发布文章</Button>
            </Form.Item>
        </Form>

    </div>
}

export default Publish